@model WorkflowTypeViewModel
@using OrchardCore.Workflows.ViewModels;

<h1>@RenderTitleSegments(Model.WorkflowType.Name)</h1>
<zone name="Breadcrumbs">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a asp-action="Index">@T["Workflow Types"]</a></li>
            <li class="breadcrumb-item active" aria-current="page">@Model.WorkflowType.Name</li>
        </ol>
    </nav>
</zone>
<nav class="admin-toolbar">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#activity-picker" data-picker-title="@T["Available Events"]" data-activity-type="Event">
                @T["Add Event"]
            </button>
            <button type="button" id="add-task-button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#activity-picker" data-picker-title="@T["Available Tasks"]" data-activity-type="Task">
                @T["Add Task"]
            </button>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="btn btn-secondary btn-sm" asp-action="EditProperties" asp-route-id="@Model.WorkflowType.Id" asp-route-returnUrl="@FullRequestPath">@T["Properties"]</a>
            <a class="btn btn-secondary btn-sm" asp-action="Index" asp-controller="Workflow" asp-route-workflowtypeid="@Model.WorkflowType.Id" asp-route-returnUrl="@FullRequestPath">@T["Workflows"] <span class="badge badge-light">@Model.WorkflowCount</span></a>
        </li>
    </ul>
</nav>

<div asp-validation-summary="ModelOnly"></div>

<form asp-action="Edit" method="post" id="workflowEditorForm">
    <div class="form-group">
        <div class="workflow-container">
            <div class="workflow-canvas-container">
                <div class="workflow-canvas" data-workflow-type="@Model.WorkflowTypeJson" data-workflow-delete-activity-prompt="@T["Are you sure you want to delete this activity?"]" data-workflow-local-id="@Model.LocalId" data-workflow-load-local-state="@Model.LoadLocalState.ToString().ToLower()">
                    @foreach (var activityShape in Model.ActivityDesignShapes)
                    {
                        @await DisplayAsync(activityShape)
                    }
                </div>
            </div>
        </div>
        <input asp-for="State" id="workflowStateInput" type="hidden" />
    </div>
    <div class="form-group">
        <div class="form-group">
            <button class="btn btn-primary" type="submit">@T["Save"]</button>
            <a class="btn btn-secondary" asp-route-action="Index">@T["Cancel"]</a>
        </div>
    </div>
</form>

<!-- Activity Picker Modal -->
<div class="modal fade modal-activities" id="activity-picker" tabindex="-1" role="dialog" aria-labelledby="activity-picker-label" aria-hidden="true" data-activity-type="Event|Task">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="activity-picker-label">@T["Available Activities"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-3 col-md-3 col-lg-2">
                        <div class="form-group">
                            <input class="form-control" type="search" placeholder="@T["Filter"]" aria-label="@T["Filter"]" autofocus>
                        </div>
                        <ul class="nav nav-pills flex-column activity-picker-categories">
                            <li class="nav-item">
                                <a class="nav-link active" href="#all" data-toggle="pill">All</a>
                            </li>
                            @foreach (var category in Model.ActivityCategories)
                            {
                                <li class="nav-item" data-category="@category.Name.HtmlClassify()">
                                    <a class="nav-link" href="#@category.Name.HtmlClassify()" data-toggle="pill">@category</a>
                                </li>
                            }
                        </ul>
                    </div>
                    <div class="col-sm-9 col-md-9 col-lg-10">
                        <div class="card-columns tab-content">
                            @foreach (var activityShape in Model.ActivityThumbnailShapes)
                            {
                                @await DisplayAsync(activityShape)
                            }
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>

<style asp-src="~/OrchardCore.Workflows/Styles/jsplumbtoolkit-defaults.min.css" debug-src="~/OrchardCore.Workflows/Styles/jsplumbtoolkit-defaults.css" cdn-src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.5.5/css/jsplumbtoolkit-defaults.min.css" debug-cdn-src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.5.5/css/jsplumbtoolkit-defaults.css" version="2.5.5"></style>
<style asp-src="~/OrchardCore.Workflows/Styles/orchard.workflows-editor.min.css" debug-src="~/OrchardCore.Workflows/Styles/orchard.workflows-editor.css"></style>
<script asp-name="jsplumb" depends-on="jQuery" asp-src="~/OrchardCore.Workflows/Scripts/jsplumb.min.js" debug-src="~/OrchardCore.Workflows/Scripts/jsplumb.js" cdn-src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.5.5/js/jsplumb.min.js" debug-cdn-src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.5.5/js/jsplumb.js" type="text/javascript" version="2.5.5" at="Foot"></script>
<script depends-on="jsplumb" asp-src="~/OrchardCore.Workflows/Scripts/orchard.workflows-editor.min.js" debug-src="~/OrchardCore.Workflows/Scripts/orchard.workflows-editor.js" type="text/javascript" at="Foot"></script>
